<template>
  <section class="component account-information">
    <el-card class="box-card">
      <div slot="header">
        <span>账户信息</span>
      </div>
      <ul class="overflow-hidden">
        <li>
          <span>客户号：</span>
          <span>{{ accountCaseInfo.personalNo }}</span>
        </li>
        <li>
          <span>产品名称：</span>
          <span>{{ accountCaseInfo.productName }}</span>
        </li>
        <li class="clolorSpan">
          <span>账户总金额：</span>
          <span>{{
            accountCaseInfo.caseMoney && `${accountCaseInfo.caseMoney}元`
          }}</span>
        </li>
        <li class="clolorSpan">
          <span>账户逾期总金额：</span>
          <span>{{
            accountCaseInfo.overdueAmount &&
              `${accountCaseInfo.overdueAmount}元`
          }}</span>
        </li>
        <li>
          <span>逾期期数：</span>
          <span>{{ accountCaseInfo.overduePeriod }}</span>
        </li>
        <li>
          <span>逾期天数：</span>
          <span>{{ accountCaseInfo.overdueDays }}</span>
        </li>
        <li>
          <span>还款日：</span>
          <!-- <span>{{ accountCaseInfo.payDate | dateFormat }}</span> -->
          <span>{{ accountCaseInfo.payDate }}</span>
        </li>
        <li>
          <span>上一个还款日：</span>
          <span>{{ accountCaseInfo.prePayDate | dateFormat }}</span>
        </li>
      </ul>

      <div class="line"></div>

      <!-- 账户信息 -->
      <collection-case-info ref="collection-case-info"></collection-case-info>

      <i class="el-icon-caret-left icon-style"></i>
    </el-card>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { namespace } from "vuex-class";
import CollectionCaseInfo from "~/components/collection-execution/collection-case-info.vue";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {
    CollectionCaseInfo
  }
})
export default class AccountInformation extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private accountCaseInfo;
}
</script>
<style lang="less" scoped>
.component.account-information {
  padding: 5px 0px 5px 10px;
  position: relative;
  .padding-bottom-8 {
    padding-bottom: 8px;
    .name {
      color: #606266;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    li {
      width: 24%;
      list-style: none;
      padding-bottom: 8px;
    }
  }
  .line {
    display: flex;
    justify-content: center;
    border-top: 1px solid #ebeef5;
  }
  .icon-style {
    position: absolute;
    bottom: 30px;
    left: -5px;
    font-size: 25px;
    color: #fff;
    // border: 1px solid #ebeef5;
  }
  .clolorSpan {
    color: red;
  }
}
</style>
